<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
    <button @click="readExcel">Read Excel</button>
  </div>
</template>

<script>
import * as XLSX from "xlsx";

export default {
  methods: {
    handleFileUpload(event) {
      // 从 input[type=file] 中获取文件对象
      // 将文件存储在组件的 data 中以便后续使用
      this.$data.file = event.target.files[0];
    },
    readExcel() {
      // 确保有文件可读
      if (!this.$data.file) {
        alert('请先选择一个Excel文件');
        return;
      }

      const reader = new FileReader();

      // 读取文件完成后的回调
      reader.onload = (event) => {
        const data = new Uint8Array(event.target.result);

        // 使用 xlsx 读取数据
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个工作表
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];

        // 将 Excel 数据转换为 JSON 对象
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 处理 jsonData，根据需要进行进一步操作
        console.log("excel", jsonData);
      };

      // 读取文件为 ArrayBuffer
      reader.readAsArrayBuffer(this.$data.file);
    },
  },
  data() {
    return {
      file: null,
    };
  },
};
</script>
